fix(a11y): fix contrast of keyboard shortcut labels#14831
Open
skjnldsv wants to merge 3 commits into
Open
Conversation
kbd elements inherit the red code text color (#e74c3c), which gives ~3.82:1 against white — below the 4.5:1 required for normal text (WCAG 1.4.3 / BITV 9.1.4.3). The light border (#a6a6a6) also falls short of the 3:1 required for UI component boundaries (WCAG 1.4.11). Override text color to #c0392b (~5.4:1) and border to #767676 (~4.5:1). Fixes #9675 Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Contributor
📖 Documentation Preview📄 5 changed documentation pagesLast updated: Tue, 12 May 2026 20:36:16 GMT |
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
skjnldsv
requested review from
Antreesy,
DorraJaouad and
nickvergessen
as code owners
Signed-off-by: John Molakvoæ <skjnldsv@users.noreply.github.com>
Member
Author
|
Slight change of plan, sphinx supports proper keyboard shortcut html tags BUT, it looks like this, which is okay-ish. https://pr-14831--nextcloud-documentation.netlify.app/user_manual/en/universal_access.html#navigating-via-keyboard 
|
Member
|
Is it dark enough also against the darkmode button? Unrelated, but the pagination buttons are definetly not a11y anymore 🙈 |
Member
|
the kbd looks is fine from my pov |
Member
Author
They never were. |
4 tasks
skjnldsv
added a commit
that referenced
this pull request
May 13, 2026
The recent BITV contrast fixes hardcoded colours that were chosen for the white (light) background. The sphinx-rtd-dark-mode plugin switches the content background to ~#141414 and code bg to #2d2d2d, making those values fail WCAG AA in dark mode: - .rst-content a: #2474a4 → 3.6:1 on #141414 (needs 4.5:1) Also silently overrides the plugin's --dark-link-color variable. - code color: #c0392b !important → 2.4:1 on #2d2d2d (needs 4.5:1) The !important fully defeats the plugin's dark-mode rule. - .wy-form-search-icon: #555 → ~1.7:1 on #0b152d sidebar (invisible) Add html[data-theme="dark"] overrides that restore proper contrast without touching the existing light-theme rules: - Links: defer to var(--dark-link-color, #249ee8) (~6.1:1) - Inline code: #ff7878 (~4.9:1 on #2d2d2d) - Search icon: #aaa Closes #14831 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
☑️ Resolves
🖼️ Screenshots
kbdelements inherit the red code text color (#e74c3c), giving ~3.82:1 against white. WCAG AA / BITV 9.1.4.3 requires 4.5:1 for normal-weight text. The light border (#a6a6a6, ~2.4:1) also fails the 3:1 threshold for UI component outlines (WCAG 1.4.11).Changes:
#c0392b(~5.4:1 against white)#767676(~4.5:1 against white)✅ Checklist
codespellor similar and addressed any spelling issues